<%@ page language="java" %>
<%@ page contentType="text/html;charset=UTF-8" %>

<html>
    <head>
        <title>首页</title>
        <style>
            .wrapper {
                width: 80%;
                border: 1px solid blue;
                margin: 15px auto;
            }
        </style>
    </head>
    <body>

        <div class="wrapper">
            <h3>JSP的作用和原理</h3>
            <p>作用: JSP源文件是用于动态生成Servlet程序的模板。</p>
            <p> <a href="/composition.jsp">JSP源文件中可以书写哪些JSP元素</a> </p>
        </div>

        <div class="wrapper">
            <h3>JSP指令(directive)</h3>
            <p>作用: 程序员通过在`JSP源代码`中的`JSP指令`可以向`JSP容器`下达命令。</p>
            <p>
                <a href="/directive/page.jsp">
                    <b>page</b>指令 用于告知容器如何"翻译"JSP源文件
                </a>
                |
                <a href="/directive/divide.jsp">
                    搞点事情看看
                </a>
            </p>
            <p>
                <a href="/directive/include.jsp">
                    <b>include</b>指令 用于告知容器需要包含哪个文件
                </a>
            </p>
        </div>

        <div class="wrapper">
            <h3>JSP脚本(scriptlet)</h3>
            <p>作用: 在JSP源文件中书写Java代码。</p>
            <div>
                <form action="/sign/up" method="post">
                    <input type="text" name="username" placeholder="用户名">
                    <input type="password" name="password" placeholder="密码">
                    性别:
                    <input type="radio" name="gender" value="male">靓仔
                    <input type="radio" name="gender" value="female">靓妹
                    <button type="submit">注册</button>
                </form>
            </div>
        </div>

        <div class="wrapper">
            <h3>JSP表达式(expression)</h3>
            <p>作用: 求取表达式的值并输出到缓冲区 或 赋值给标签的属性。</p>
        </div>

        <div class="wrapper">
            <h3>JSP声明(declaration)</h3>
            <p>作用: 用于为JSP对应的Servlet实现类定义成员(比如字段、方法等)。</p>
        </div>

        <div class="wrapper">
            <h3>Expression Language</h3>
            <p>作用: 在JSP源文件中通过特殊格式的字符串来求取数值。</p>
            <p>
                <a href="/expression/syntax.jsp">基本语法和使用规则</a>
            </p>
            <div>
                <form action="/sign/in" method="post">
                    <p>
                        ${ message }
                        ${ not empty message ? pageContext.session.removeAttribute('message') : '' }
                    </p>
                    <p>
                        <label for="username">登录名称:</label>
                        <input type="text" name="username" id="username">
                    </p>
                    <p>
                        <label for="password">登录密码:</label>
                        <input type="password" name="password" id="password">
                    </p>
                    <button type="submit">登录</button>
                </form>
            </div>
            <p>
                <a href="/expression/implicit.jsp?id=250">EL中的内置对象</a>
            </p>
        </div>

    </body>
</html>
